<template>
    <div class="main-box">
        <el-container>
            <el-header>
                <div class="header">
                    <div class="left">
                        <div class="logo">
                            <h1></h1>
                            <span class="">{{ itemName }}</span>
                        </div>
                    </div>
                    <div class="right">
                        <span>{{ title }}</span>
                        <span @click="LogOutLogin">退出登录</span>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside>
                    <div class="aside-box">
                        <div class="aside-box-tilte">
                            <div>
                                <img :src="userInfo.userImg" alt="">
                                <span>{{ userInfo.username }}</span>
                            </div>
                        </div>
                        <div class="routerList-box mouse-hand" 
                            :class="item.meta.activation ? 'routerList-box-color' :''" 
                            v-for="(item,index) in routerList" 
                            @click="SwitchRouting(item,index)" 
                            :key="index"
                        >
                            <i class="iconfont" :class="item.meta.icon ? item.meta.icon  :''"></i>
                            <span>{{ item.meta.name }}</span>
                        </div>
                    </div>
                </el-aside>
                <el-container>
                    <el-main>
                        <div class="main-center-box">
                            <router-view></router-view>
                        </div>
                    </el-main>
                    <el-footer>
                        <div  class="footer-box">
                            {{ strSentence }}
                        </div>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import  {routes} from "@/router/index.js"
    export default {
    name: "mainPage",
        data() {
            return {
                itemName:'工业4.0软件',
                title:'第二界全国技能大赛工业4.0项目',
                strSentence: '2024 © 工业4.0软件',
                userInfo: {
                    username:'user3@ww',
                    userImg:require('@/assets/images/projectImg/jxw.png'),
                },
                routerList:[

                ],
                currentActivationItem:0
                
            }
        },
        mounted() {
            // $_sentenceSpecific({c:'b'}).then((res)=>{
            //     this.strSentence = res.data.hitokoto+'---' + (res.data.from_who ? res.data.from_who : res.data.from);
            // })
            routes.forEach((item,index) => {
                if (item.path === '/main') {
                    item.children.forEach((t, i) => {
                            if (t.meta) {
                            this.routerList.push(t)
                        }
                    })

                }
            })
            this.currentActivationItem = this.routerList.findIndex((item)=>{
                return item.path === window.location.pathname
            })
            this.routerList[this.currentActivationItem].meta.activation = true
        },
        methods:{
            SwitchRouting(data,index) {
                if (index === this.currentActivationItem) {
                    return  
                }
                this.routerList[this.currentActivationItem].meta.activation = false
                this.routerList[index].meta.activation = true
                this.currentActivationItem = index
                this.$router.push(data.path)
            },
            LogOutLogin() {
                this.$router.push('/login')
            },
        }
    }
</script>

<style lang="less" scoped>
.main-box{
    width: 100%;
    height: 100%;
    :deep(.el-container){
        height: 100%;
        box-sizing: border-box;
    }
}
.el-header{
    height: 2.8rem!important;
    padding: 0!important;
    .header{
        display: flex;
        color: white;
        height: 100%;
        width: 100%;
        .left{
            flex: 1;
            background-color: #317da7;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            .logo{
                margin: 0 auto;
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: center;
                span{
                    font-size: 1.2rem;
                    margin-left: 10px;
                }
                h1{
                    width: 40px;
                    height: 30px;
                    background:url(@/assets/images/projectImg/jxw.png) no-repeat;
                    background-size:cover;
                    border-radius: 5px;
                    margin-left: 10px;
                }
            }
        }
        .right{
            flex:10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #15a2b4;
            box-sizing: border-box;
            span:nth-child(1){
                font-size: 1.6rem;
                padding-left: 20px;
            }
            span:nth-child(2){
                font-size: 1.3rem;
                padding-right: 20px;


            }
        }
    }
}

.el-container{
    display: flex;
    box-sizing: border-box;

    .el-aside{
        flex: 1;
    }
    .el-container{
        flex: 10;
        .el-main{
            padding:0;
        }
    }
}
//左边样式
.aside-box{
    width: 100%;
    height: 100%;
    color: #333;
    text-align: center;
    border-right: 1px solid #b1b1b1;
    box-sizing: border-box;
    .aside-box-tilte{
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 80px;
        font-size: 2.0rem;
        color: #919191;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d5d5d5;
        margin-bottom: 15px;
        div{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }
        span{
            font-size: 1.5rem;

        }

    }
    .routerList-box{
    color: #676767;
    margin-bottom: 15px;
        span{
            font-size: 1.6rem;
            margin-left: 8px;
        }
    }
    .routerList-box-color{
        color: #15a2b4;
    }
}
// 中区域样式
.main-center-box{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
// 下区域样式
.footer-box{
    width: 100%;
    height: 20px;
    text-align: center;
    font-size: 16px; 
    font-family:cursive;
    margin: 6px 0;
}
.el-footer{
    height: auto!important;
}
</style>